<!--
 描述: 右下
-->

<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">村级集体经济主要类型分布</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="chart_polo_cun_three"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "waterPolocunthree",
        data() {
            return {
                baseUrl: domain.testUrl,
                baseName: ':name'
            }
        },
        mounted() {
            this.getEchart();
        },
        methods: {
            getEchart(param) {
                if (param != undefined && param != null) {
                    this.baseUrl = localStorage.getItem('baseUrl');
                    this.baseName = param;
                }
                var url = this.baseUrl + "memberDatav/findOrganizationByNation?name="+ this.baseName;
                var data = [];
                axios.post(url).then((response) => {
                    response.data.forEach((res) => {
                        data.push({
                            value: res.y,
                            name: res.x
                        });
                    })
                    let myChart = echarts.init(document.getElementById('chart_polo_cun_three'));



                    let option = {
                        // backgroundColor: '#080b30',
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                lineStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(0, 255, 233,0)'
                                        }, {
                                            offset: 0.5,
                                            color: 'rgba(255, 255, 255,1)',
                                        }, {
                                            offset: 1,
                                            color: 'rgba(0, 255, 233,0)'
                                        }],
                                        global: false
                                    }
                                },
                            },
                        },
                        grid: {
                            top: '10%',
                            left: '6%',
                            right: '5%',
                            bottom: '6%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            axisLine: {
                                show: true
                            },
                            splitArea: {
                                // show: true,
                                color: '#f00',
                                lineStyle: {
                                    color: '#f00'
                                },
                            },
                            axisLabel: {
                                color: '#fff'
                            },
                            splitLine: {
                                show: false
                            },
                            boundaryGap: false,
                            data: [1,2,3,4,5,6],

                        }],

                        yAxis: [{
                            type: 'value',
                            min: 0,
                            // max: 140,
                            splitNumber: 4,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#fff'],
                                    opacity: 0.06
                                }
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                show: true,
                                margin: 20,
                                textStyle: {
                                    fontSize: 12,
                                    color: 'rgba(255,255,255,0.5)'
                                }
                            },
                            axisTick: {
                                show: false,
                            },
                        }],
                        series: [{
                            type: 'line',
                            smooth: true, //是否平滑
                            showAllSymbol: true,
                            // symbol: 'image://./static/images/guang-circle.png',
                            symbol: 'circle',
                            symbolSize: 12,
                            lineStyle: {
                                normal: {
                                    color: "#FFBC0D",
                                    shadowColor: 'rgba(0, 0, 0, 0)',
                                    shadowBlur: 0,
                                    shadowOffsetY: 5,
                                    shadowOffsetX: 5,
                                },
                            },
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'rgb(218 255 232)',
                                    fontSize: 12
                                }
                            },
                            itemStyle: {
                                color: "#FFBC0D",
                                borderColor: "rgb(108,78,0)",
                                borderWidth: 5,
                                shadowColor: 'rgba(0, 0, 0, 0)',
                                shadowBlur: 0,
                                shadowOffsetY: 2,
                                shadowOffsetX: 2,
                            },
                            tooltip: {
                                show: false
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(255,188,13, 0.4)'
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(255,188,13, 0)'
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            },
                            data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
                        }
                        ]
                    };



                    myChart.setOption(option, true);
                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });
                }).catch(function (response) {
                    console.log(response); //发生错误时执行的代码
                });
            }
        },
    };
</script>
<style lang="scss" scoped>
    .sn-container {
        left: 1400px;
        top: 730px;
        width: 480px;
        height: 30%;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>